<template>
  <a-modal 
    :visible="visible" 
    :footer="null" 
    :closable="false"
    @cancel="closeModal"
    :centered="true"
    :width="modalWidth"
    class="previewFileModal"
  >
    <div class="modalHeader">
      {{modalTitle}}
      <img src="./images/closeModalImg.svg" alt="关闭" @click="closeModal({affirm: false})">
    </div>
    <div class="previewBox">
      <template v-if="pageData.fileType === 'doc' || pageData.fileType === 'docx'">
        <iframe 
          :src="'https://view.officeapps.live.com/op/view.aspx?src=' + url" frameborder="0" 
          :style="{height: iframeHeight + 'px'}"
          class="docIframe"
        ></iframe>
      </template>
      <template v-else-if="pageData.fileType === 'xls' || pageData.fileType === 'xlsx'">
        <iframe 
          :src="'https://view.officeapps.live.com/op/view.aspx?src=' + url" frameborder="0" 
          :style="{height: iframeHeight + 'px'}"
          class="xlsIframe"
        ></iframe>
      </template>
      <template v-else-if="pageData.fileType === 'pdf'">
        <iframe :src="url" frameborder="0" :style="{height: iframeHeight + 'px'}"></iframe>
      </template>
      <template v-else>
        <div class="pictureBox zdy-scroll">
          <img alt="图片" :src="url" class="pictureImg" />
        </div>
      </template>
    </div>
  </a-modal>
</template>

<script>
import { reactive, watch } from '@vue/runtime-core';
export default {
  name: "PreviewFile",
  props: {
    visible: {    
      type: Boolean,
      default: false,
    },
    url: {    //图片地址
      type: String,
      default: ""
    },
    modalWidth: {   //窗口宽度
      type: Number,
      default: 900,
    },
    modalTitle: {      //标题
      type: String,
      default: "",
    },
    iframeHeight: {
      type: Number,
      default: 800,
    },
  },
  setup(props, context) {
    const pageData = reactive({
      fileType: "",     //文件类型
    });
    //关闭弹窗
    const closeModal = () => {
      context.emit("closeModal");
    }

    //获取文件类型
    function getFileType(url) {
      let index = url.lastIndexOf(".");
      let type = url.substring(index + 1, url.length).toLowerCase();
      pageData.fileType = type;
    }

    watch(
      () => props.url,
      (val) => {
        if(val) {
          getFileType(val);
        }
      }
    )
    

    return {
      pageData,
      closeModal,
    }
  },
}
</script>

<style lang="less" scoped>
.previewFileModal {
  .modalHeader {
    position: relative;
    height: 28px;
    line-height: 28px;
    font-size: 20px;
    color: #000000;
    font-weight: bold;
    margin-bottom: 14px;
    img {
      position: absolute;
      right: 0px;
      width: 28px;
      padding: 2px;
      cursor: pointer;
    }
  }
  .previewBox {
    overflow: hidden;
    padding-top: 0.1px;
    .docIframe {
      margin-top: -50px;
    }
    .xlsIframe {
      margin-top: -151px;
    }
    .pictureBox {
      max-height: 600px;
      overflow-y: auto;
      img {
        display: block;
        margin: 0px auto;
        max-width: 100%;
      }
    }
  }
  iframe {
    width: 100%;
  }
}
</style>

<style lang="less">
.previewFileModal {
  .ant-modal-content {
    .ant-modal-body {
      padding-top: 14px;
    }
  }
}
</style>
